<!--修改密码-->
<template>
  <div class="app-container" style="width: 700px;margin:0 auto">
    <el-steps :active="currentStep" align-center class="common-step" style="margin-bottom: 25px;">
      <el-step title="验证手机号" />
      <el-step title="修改手机" />
      <el-step title="完成" />
    </el-steps>
    <el-form
      ref="mobileForm"
      :model="mobileForm"
      :rules="mobileRules"
      class="common-form-with-desc"
      status-icon
      style="width: 550px; margin: 0 auto;"
      label-width="100px">
      <div>手机验证码验证 账号 <span class="color-primary"> {{ mobileForm.username }}</span> 为确认是你本人操作，请完成以下验证</div>
      <el-divider style="margin-top: 10px;" />
      <template v-if="currentStep===1">
        <el-form-item label="手机号码:">
          {{ mobileForm.mobile }}
        </el-form-item>
        <el-form-item label="验证码:" prop="verificationCode">
          <verification-code
            ref="verificationCode"
            v-model="mobileForm.verificationCode"
            :code-device="mobileForm.mobile"
            :height="32"
            :check="false"
            @checkCode="handleCheckCode1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(1)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===2">
        <el-form-item label="手机号码:" prop="newMobile">
          <el-input v-model="mobileForm.newMobile" maxlength="11" show-word-limit autocomplete="off" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="验证码:" prop="newVerificationCode">
          <verification-code
            ref="newVerificationCode"
            v-model="mobileForm.newVerificationCode"
            :code-device="mobileForm.newMobile"
            :height="32"
            :check="false"
            @checkCode="handleCheckCode2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(2)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===3">
        <el-form-item>
          <div style="font-size:15px;font-weight:bold">修改成功，您得手机号码为：<span class="color-primary">{{ mobileForm.newMobile | privatePhone }}</span></div>
          <div class="common-tips">此手机号可作为安全验证码得方式用于手机登录，找回密码，修改手机，修改邮箱等场景</div>        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleBack">返回</el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    var checkNewMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空!'))
      }
      if (value === this.mobileForm.mobile) {
        return callback(new Error('新旧手机号不能一致!'))
      }
      return callback()
    }
    return {
      currentStep: 1,
      mobileForm: {

      },
      mobileRules: {
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        newMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkNewMobile, trigger: 'blur' },
          { validator: this.commonValidate.validateMobile, trigger: 'blur' }
        ],
        newVerificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
  },
  created() {
    this.mobileForm = {
      username: this.userInfo.username,
      mobile: this.userInfo.mobile,
      verificationCode: '',
      newMobile: '',
      newVerificationCode: ''
    }
  },
  methods: {
    handleNext(step) {
      this.$refs['mobileForm'].validate(valid => {
        if (valid) {
          if (step === 1) {
            this.currentStep = step + 1
            this.$nextTick(() => {
              if (this.$refs.newVerificationCode) {
                this.$refs.newVerificationCode.init()
              }
            })
          }
          if (step === 2) {
            this.modifyMobile()
          }
        }
      })
    },
    handleBack() {
      var userInfo = this.$store.getters.userInfo
      this.mobileForm = {
        username: userInfo.username,
        mobile: userInfo.mobile,
        verificationCode: '',
        newMobile: '',
        newVerificationCode: ''
      }
      this.currentStep = 1
    },
    handleCheckCode1(val) {
      if (val) {
        this.handleNext(1)
      }
    },
    handleCheckCode2(val) {
      if (val) {
        this.handleNext(2)
      }
    },
    async modifyMobile() {
      try {
        var token = await this.$store.dispatch('modifyMobile', this.mobileForm)
        await this.$store.dispatch('resetToken', token)
        this.currentStep = 3
      } catch (err) {
        console.error(err)
        if (err.code === 10000000) {
          this.$refs.newVerificationCode.init()
          this.currentStep = 1
          this.mobileForm = {
            ...this.mobileForm,
            verificationCode: '',
            newMobile: '',
            newVerificationCode: ''
          }
          this.$refs.verificationCode.init()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
